<template>
  <!-- 表单 -->
  <el-form ref="form" label-width="120px" :rules="rules" :model="formData">
    <el-form-item label="姓名" prop="username">
      <el-input
        v-model="formData.username"
        style="width: 50%"
        placeholder="请输入姓名"
      />
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
      <el-input
        v-model="formData.mobile"
        style="width: 50%"
        placeholder="请输入手机号"
      />
    </el-form-item>
    <el-form-item label="入职时间" prop="timeOfEntry">
      <el-date-picker
        v-model="formData.timeOfEntry"
        style="width: 50%"
        placeholder="请选择入职时间"
      />
    </el-form-item>
    <el-form-item label="聘用形式" prop="formOfEmployment">
      <el-select
        v-model="formData.formOfEmployment"
        style="width: 50%"
        placeholder="请选择"
      >
        <el-option
          v-for="item in hireType"
          :key="item.id"
          :label="item.value"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="工号" prop="workNumber">
      <el-input
        v-model="formData.workNumber"
        style="width: 50%"
        placeholder="请输入工号"
      />
    </el-form-item>
    <el-form-item label="部门" prop="departmentName">
      <el-input
        v-model="formData.departmentName"
        style="width: 50%"
        placeholder="请选择部门"
        @focus="dropdowntree"
      />

      <!-- <i class="el-icon-arrow-down" /> -->
      <div v-if="shoutree" class="tree-box">

        <el-tree
          :data="Departmentlist"
          :props="{ label: 'name' }"
          @node-click="treeassignment"
        />
      </div>
    </el-form-item>
    <el-form-item label="转正时间" prop="correctionTime">
      <el-date-picker
        style="width: 50%"
        placeholder="请选择转正时间"
        model="formData.correctionTime"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="Cancle">取消</el-button>
      <el-button type="primary" @click="Submit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { tranListToTreeData } from '@/utils/tree'
import { getDepartments, addEmployee } from '@/api/departments'
import EmployeeEnum from '@/components/枚举/constant/employees/'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validName = (rule, value, callback) => {
      // if(rule.fullField==)
      // console.log(rule.fullField==);
      // if(value===this)
      // this.$nextTick(() => {
      //   this.quanbuDepartmentlist.forEach(item => {
      //     if (item === value) {
      //       console.log(1)
      //     }
      //   })
      // })}
      // if (value === '') {
      //   callback(`部门不能为空`)
      // }
      if (this.quanbuDepartmentlist.children && this.quanbuDepartmentlist.children.length > 0) {
        console.log(1)
        callback(`你好`)
      } else {
        // console.log(2)
        return
      }
    }
    //   this.quanbuDepartmentlist.forEach(item => {
    //     if (item === value) {
    //       return
    //     } else {

    //     }
    //     // console.log(item)
    //   })
    //   // if(value===this.)
    //   // console.log(this.quanbuDepartmentlist)
    //   // console.log(rule)
    //   // console.log(value)
    //   // console.dir(callback)
    // }
    return {
      shoutree: false, // 用户电锯input框才获取数据显示
      Departmentlist: [], // 部门领导下拉列表
      quanbuDepartmentlist: [],
      hireType: EmployeeEnum.hireType, // 下拉聘用列表
      formData: {
        username: '', // 用户名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 部门
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      },
      rules: {
        username: [
          { required: true, message: '用户姓名不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 4, message: '用户姓名为1-4位', trigger: ['blur', 'change'] }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: ['blur', 'change'] },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur', 'change'] }
        ],
        formOfEmployment: [
          { required: true, message: '聘用形式不能为空', trigger: ['blur', 'change'] }
        ],
        workNumber: [
          { required: true, message: '工号不能为空', trigger: ['blur', 'change'] }
        ],
        departmentName: [
          // { required: true, message: '部门不能为空', trigger: ['blur', 'change'] }
          { validator: validName, trigger: ['blur', 'change'], required: true }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created() {
    // 获取下拉部门列表
    this.getDepartments()
  },
  methods: {

    dropdowntree() {
      this.shoutree = true
      this.getDepartments()
    },
    async  getDepartments() {
      const ree = await getDepartments()
      // console.log(re.data.depts)
      // ree.data.depts.forEach(re => {
      // console.log(re)
      // console.log(re.children)
      // console.log(re)
      // console.log(re.children)
      // console.log(re.children.length)
      // if (!re.children.length) {
      //   console.log(1)
      // }
      // if (re.children.length > 1) {
      //   this.quanbuDepartmentlist.push(re.name)
      // }
      // console.log(re.name)
      // console.log(re)
      // if (re.pid === '') {
      //   // console.log(2)
      //   this.quanbuDepartmentlist.push(re.name)

      //   // console.log(re.name)
      // }
      // console.log(this.quanbuDepartmentlist)
      // console.log(this.quanbuDepartmentlist)
      // console.log(this.quanbuDepartmentlist)
      // console.log(re.name)

      // console.log(re)
      // })
      // console.log(re.name)
      // console.log(this.quanbuDepartmentlist)
      // console.log(this.quanbuDepartmentlist)
      this.Departmentlist = tranListToTreeData(ree.data.depts)
      // console.log(re.data.depts)
    },
    clearfrom() {
      // this.formData = {
      //   username: '', // 用户名
      //   mobile: '', // 手机号
      //   formOfEmployment: '', // 聘用形式
      //   workNumber: '', // 工号
      //   departmentName: '', // 部门
      //   timeOfEntry: '', // 入职时间
      //   correctionTime: '' // 转正时间
      // }

      this.formData.username = '' // 用户名
      this.formData.mobile = '' // 手机号
      this.formData.formOfEmployment = '' // 聘用形式
      this.formData.workNumber = '' // 工号
      this.formData.departmentName = '' // 部门
      this.formData.timeOfEntry = '' // 入职时间
      this.formData.correctionTime = ''// 转正时间
      this.$refs.form.clearValidate()
      // this.$refs.form.resetFields()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      this.shoutree = false
    },
    Submit() {
      //  this.$emit('Cancleclose')
      this.$refs.form.validate(async valid => {
        if (valid) {
          // alert('成功')
          await addEmployee(this.formData)
          this.$message.success('添加成功')
          // 如果添加成功需要通知父组件刷新页面和关闭弹窗
          this.$emit('closesx')
          // this.clearfrom()
          // this.$refs.form.resetFields()
        } else {
          this.$message.error('按要求填写')
        }
      })
    },

    Cancle() {
      this.$emit('closesx')
      // this.clearfrom()
      this.$emit('Cancleclose')
      // this.$refs.form.resetFields()
    },
    // 点击验证是否是父级然后赋值
    treeassignment(list) {
      console.log(list)
      this.quanbuDepartmentlist = list
      // 如果当前有子元素或者他的子元素没有
      if (list.children && list.children.length > 0) return
      // 给页面赋值
      this.formData.departmentName = list.name
      // 让树结构隐藏
      this.shoutree = false
    }
  }
}
</script>
